<script setup>
import dayjs from 'dayjs'
import { renderContent } from '@/utils/unit'
import { disposeOrderSuperviseDetail } from '@/apis/order.js'
import { useRoute, useRouter } from 'vue-router/composables'
import FileList from '@/components/FilePreviewer/FileList.vue'
import DetailItem from '@/views/workOrder/components/DetailItem.vue'
import { Toast } from 'vant'
import { handleFileData } from '@/utils/helper.js'
import NoData from '@/components/NoData.vue'
import MLoading from '@/components/MLoading.vue'

const router = useRouter()
const route = useRoute()
const queryObject = ref(route.query)

const state = reactive({
  tableData: [],
  refreshLoading: false,
  detailLoading: false
})
// 跳转到回复页面
const goFeedback = () => {
  console.log(queryObject.value.orderNo)
  router.push('/supervise/reply?orderNo=' + queryObject.value.orderNo)
}
/*跳转到对应工单详情页面*/
const goOrder = () => {
  router.push('/workOrder/detail?orderNo=' + queryObject.value.orderNo)
}

// 获取接口数据
const getSuperviseD = async () => {
  const obj = {
    orderNo: queryObject.value.orderNo,
    superviseId: queryObject.value.superviseId
  }
  state.detailLoading = true
  await disposeOrderSuperviseDetail(obj)
    .then((res) => {
      if (res.ret === 0) {
        const datas = res.data.map((item) => {
          return item
        })
        state.tableData = datas[0]
      } else {
        Toast.fail(res?.msg)
      }
    })
    .catch((error) => {
      console.error('请求失败:', error)
      state.detailLoading = false
    })
  state.detailLoading = false
}

const initData = async () => {
  await getSuperviseD()
  state.refreshLoading = false
}

onMounted(async () => {
  await initData()
})
</script>

<template>
  <div class="box-border h-full overflow-x-hidden overflow-y-auto bg-#F5F7FA">
    <MLoading v-if="!state.refreshLoading" :show.sync="state.detailLoading" />
    <van-pull-refresh style="min-height: 100vh;" v-model="state.refreshLoading" @refresh="initData">
      <div class="bg-#FFFFFF px-16px py-16px">
        <div class="flex justify-between h-28px">
          <div class="text-16px leading-22px font-600 text-#171A1D">
            {{ state.tableData.orgName }}的督办
          </div>
          <div class="text-14px font-400 leading-20px text-#71747A">
            督办时限 {{ state.tableData.timeoutDays }}天
          </div>
        </div>
        <div class="text-#71747A text-14px font-400 leading-20px">
          发起时间：
          {{
            dayjs(state.tableData.createTime).format('YYYY-MM-DD HH:mm') ?? ''
          }}
        </div>
        <div class="text-#71747A text-14px font-400 leading-20px">
          督办人：{{ state.tableData.userName }}
        </div>
        <DetailItem v-if="state.tableData.attachment" label="附件">
          <FileList
            :files="handleFileData(state.tableData.attachment)"
            :preview="true"
            :upload="false"
          />
        </DetailItem>
        <div
          class="pt-18px px-16px pb-22px mt-24px mb-16px relative bg-#F7F8FA"
        >
          <div
            class="absolute top--10px left-0 bg-#4197EF rounded-2px py-2px pa-4px text-12px text-white leading-17px font-400"
          >
            督办要求
          </div>
          <span class="text-16px font-400 leading-22px text-#171A1D">
            <span
              v-html="
                renderContent(state.tableData.content || '', [
                  {
                    type: '$_CONTENT_HOLDER_DAYS_$',
                    data: [
                      {
                        name: state.tableData?.timeoutDays || '',
                        color: 'primary'
                      }
                    ]
                  },
                  {
                    type: '$_CONTENT_HOLDER_$',
                    data:
                      (state.tableData?.atOrgObj || []).map((child) => ({
                        name: `@${child.name}`,
                        color: 'blue'
                      })) || []
                  }
                ])
              "
            />
          </span>
        </div>
        <div
          class="text-14px font-400 leading-20px text-#229F60 flex justify-center items-center"
          @click="goOrder"
        >
          查看关联舆情工单 >
        </div>
      </div>
      <div class="hf p-16px my-10px">
        <div class="supervise-hf">督办回复</div>
        <template
          v-if="state.tableData.children && state.tableData.children.length > 0"
        >
          <div
            v-for="item in state.tableData.children"
            :key="item.id"
            class="hf-list p-14px m-b-14px"
          >
            <div class="hf-header h-20px">
              <div class="text-16px font-400 text-#1E2226">
                {{ item.orgName }}
              </div>
              <div class="text-14px">
                <span v-if="item.status === 'WAIT'" class="text-#9DA0A4">
                  待反馈
                </span>
                <span v-else class="text-#2454B7">已反馈</span>
              </div>
            </div>
            <template v-if="item.status !== 'WAIT'">
              <p
                class="p-12px bg-#F0F4FE whitespace-pre-wrap text-wrap rounded-4px text-14px font-400 leading-22px text-#1E2226"
              >
                {{ item.content }}
              </p>
              <div v-if="item.attachment" class="m-b-9px">
                <FileList
                  :files="handleFileData(item.attachment)"
                  :preview="true"
                  :upload="false"
                />
              </div>
              <div class="hf-footer">
                <p
                  class="h-20px my-1px text-14px font-400 leading-20px text-#71747A"
                >
                  反馈时间：{{
                    dayjs(item.createTime).format('YYYY-MM-DD HH:mm') ?? ''
                  }}
                </p>
                <p
                  class="h-20px my-1px text-14px font-400 leading-20px text-#71747A"
                >
                  反馈人：{{ item.userName }}
                </p>
              </div>
            </template>
          </div>
        </template>
        <NoData v-else />
        <div
          v-if="state.tableData.canFeedBack"
          class="hf-list btn text-white p-10px m-b-14px bg-#36B374!important"
          @click="goFeedback"
        >
          去反馈
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>

<style lang="less" scoped>
.hf {
  .supervise-hf {
    font-weight: 600;
    font-size: 18px;
    height: 34px;
    color: #1e2226;
    letter-spacing: 0;
    line-height: 22px;
  }

  .hf-list {
    font-weight: 400;
    font-size: 16px;
    color: #1e2226;
    letter-spacing: 0;
    line-height: 20px;
    background: #ffffff;
    border-radius: 4px;

    .hf-header {
      display: flex;
      justify-content: space-between;
    }

    &.btn {
      background-color: #36b374;
      color: #ffffff;
      justify-content: center;
      font-weight: 500;
      text-align: center;
      font-size: 16px;
    }
  }
}
</style>
